<template>
  <div class='zhanghucontainer'>
    <div class="topbanner">
      Educational Resources And Training
      <p>To help investors improve their trading skills and knowledge levels, GMG offers a wealth of educational resources, including online courses, market analysis reports, and trading strategy sharing. We also regularly hold online and offline training events to help you succeed in the foreign exchange market</p>
    </div>
    <div class="listbox">
      <ul class="listgroup">
        <li v-for="(item,index) in state.list" :key="index" @click="onDetail(item)">
          <div class="itemgroup">
            <div class="imggroup" :style="{backgroundImage:'url('+item.img+')'}">

            </div>
            <div class="textgroup">
              
                <p class="title">
                  <el-skeleton :rows="0" :loading="state.loading" style="width:70%;">
                    {{item.title?item.title:'--'}}
                  </el-skeleton>
              </p>       
                <p class="desc">
                  <el-skeleton :rows="0" :loading="state.loading" style="width:100%;">
                    {{item.intro?item.intro:'--'}}
                  </el-skeleton>
                </p>
            </div>
          </div>
          
            <p class="timetext">
              <el-skeleton :rows="0" :loading="state.loading" style="width:50%;">
                {{item.createTime?setTime(item.createTime):'0000-00-00'}}
              </el-skeleton>
            </p>
         
        </li>
      </ul>
      <nodata v-if="state.list.length==0"></nodata>
      <div class="paginationbox" v-if="state.total>10">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="state.total">
        </el-pagination>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script lang='ts'>

  import { defineComponent, reactive, onMounted} from 'vue'
  import Footer from '@/components/footer.vue'
  import { useRouter } from 'vue-router'
  import get from '@/utils/get'
  import moment from 'moment'
  import nodata from '@/components/nodata.vue'
  import { getNewsList } from './serve'
  export default defineComponent({

    name: 'PageNotFound',

    props: {},

    components: {
      Footer,
      nodata
    },

    setup() {
      let router = useRouter();
      const state = reactive({
        loading:true,
        list:[
          {
            title:'--',
            intro:'--',
            createTime:'',
            img:'--'
          },
          {
            title:'--',
            intro:'--',
            createTime:'',
            img:'--'
          },
          {
            title:'--',
            intro:'--',
            createTime:'',
            img:'--'
          },
          {
            title:'--',
            intro:'--',
            createTime:'',
            img:'--'
          },
          {
            title:'--',
            intro:'--',
            createTime:'',
            img:'--'
          },
          {
            title:'--',
            intro:'--',
            createTime:'',
            img:'--'
          },
      ],
        page:1,
        total:0
      })

      onMounted(()=>{
        getNewsInit();
      })

      const onDetail=(data:any)=>{
        if(state.loading){
          return;
        }
        router.push({
          path:'/news/detail',
          query:{...data}
        })
      }

      const getNewsInit=()=>{
        let params = {page:state.page,limit:10}
        state.loading = true;
        getNewsList(params).then((res:any)=>{
          state.loading = false;
          if(res && res.title=='success'){
            const data = get(res, 'data.list',[]);
            state.list = data;
            state.total = get(res, 'data.total',0);
          }else{
            ElMessage({
              message: 'Get failed',
              type: 'error',
            })
          }
        }).catch((err:any)=>{
          state.loading = false;
          ElMessage({
            message: 'Get failed',
            type: 'error', 
          })
          console.log(err)
        })
      }

      const setTime=(time:any=(new Date()))=>{
        return moment(time).format('YYYY年MM月DD日')
      }

      return {
        state,
        onDetail,
        getNewsInit,
        setTime
      }

    }

  })
</script>
<style lang="scss" scoped>
  @use './index';
</style>